import React, { Component } from 'react'
import { nanoid } from "nanoid";
import { connect } from 'react-redux';
import { createAddPersonAction } from "../../redux/actions/person";

class Person extends Component {
  addPerson = () => {
    const name = this.nameNode.value;
    const age = this.ageNode.value;
    const personObj = { id: nanoid(), name, age };
    this.props.addPerson(personObj);
    this.nameNode.value = '';
    this.ageNode.value = '';
  }

  render() {
    return (
      <div>
        <h1>我是Person组件，上方组件求和为{ this.props.count }</h1>
        <input ref={c => this.nameNode = c} type="text" placeholder='输入名字' />
        <input ref={c => this.ageNode = c} type="text" placeholder='输入年龄' />
        <button onClick={this.addPerson}>添加</button>
        <ul>
          {
            this.props.persons.map((personObj) => {
              return (<li key={personObj.id}>{personObj.name}--{personObj.age}</li>)
            })
          }
        </ul>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({ count: state.count, persons: state.persons });
const mapDispatchToProps = {
  addPerson: createAddPersonAction,
}

export default connect(mapStateToProps, mapDispatchToProps)(Person);